<template>
    <div class="introduce">
        <div class="main">
            <v-md-preview :text="content"></v-md-preview>
        </div>
        <div class="info">
            <div class="flex-jusc flex-jusc-c">
                <span>比赛编号</span>
                <span>难度</span>
            </div>
            <div class="flex-jusc">
                <span>举办者</span>
                <span>难度</span>
            </div>
            <div class="flex-jusc flex-jusc-c">
                <span>比赛时间</span>
                <span>难度</span>
            </div>
            <div class="flex-jusc">
                <span>比赛时长</span>
                <span>难度</span>
            </div>
            <div class="flex-jusc flex-jusc-c">
                <span>参赛人数</span>
                <span>难度</span>
            </div>
        </div>
    </div>
</template>

<script>
import md from '../.../../../../../../README.md'
export default {
    name: "introduce",
    data() {
        return {
            content: md
        }
    },
}
</script>

<style scoped>
.introduce {
    display: flex;
}

.main {
    width: 75%;
}

.info {
    width: 24%;
}

.flex-jusc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgb(235, 238, 245);
    padding: 15px 8px 15px 8px;
}

.flex-jusc-c {
    background-color: rgb(249, 249, 249);
}
</style>